<template>
  <div id="mainplan">
    <!-- 维修计划 -->
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      维修计划
    </h1>
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      style="width: 1140px"
    >
      <el-form-item label="开始时间" label-width="100px">
        <el-date-picker
          type="date"
          placeholder="选择时间"
          v-model="formData.startTime"
          style="width: 224px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" label-width="100px">
        <el-date-picker
          type="date"
          placeholder="选择时间"
          v-model="formData.endTime"
          style="width: 224px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label=" " label-width="100px">
        <el-button type="primary" @click="checkFn"
          ><i class="el-icon-search"></i>查询</el-button
        >

        <el-button type="success" @click="toAdd"
          ><i class="el-icon-plus"></i>新增</el-button
        >
        <el-button type="info" @click="resetFn"
          ><i class="el-icon-refresh-right"></i>重置</el-button
        >
      </el-form-item>
      <el-form-item label="搜索" label-width="100px">
        <el-input
          v-model="formData.id"
          placeholder="请输入入库单号"
          style="width: 224px"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="维修单号" align="center">
      </el-table-column>
      <el-table-column prop="equipment.equipmentName" label="装备名称" align="center">
      </el-table-column>
      <el-table-column prop="equipmentNumber" label="装备编号" align="center">
      </el-table-column>
      <el-table-column prop="desc" label="故障描述" align="center">
      </el-table-column>
      <el-table-column label="计划时间" align="center">
        <template slot-scope="scope">{{scope.row.planTime | timeFn}}</template>
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="toEdit(scope.row)"
            ><i class="el-icon-edit-outline" style="font-size: 15px"></i
          ></el-button>
          <el-button
            type="danger"
            plain
            size="mini"
            @click="delBtn(scope.row.id)"
            ><i class="el-icon-delete" style="font-size: 15px"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="footer">
      <el-pagination
        @current-change="pageBtn"
        :current-page.sync="page"
        :page-size="count"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      formData: {
        id: null,
        startTime: "",
        endTime: "",
      },
      tableData: [],
      page: 1,
      count: 5,
      total: 0,
    };
  },
  filters: {
    timeFn: function (v) {
      if (v) {
        let date = new Date(v);
        return (
          date.getFullYear() +
          "-" +
          [
            date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1,
          ] +
          "-" +
          [date.getDate() < 10 ? "0" + date.getDate() : date.getDate()]
        );
        // return date.toLocaleDateString()
      }
    },
  },
  methods: {
    render: function () {
      this.$axios({
        url: "/keepPlan/queryAllKeepPlan",
        method: "post",
        data: {
          id: this.formData.id,
          startTime: this.formData.startTime,
          endTime: this.formData.endTime,
        },
        params: {
          page: this.page,
          limit: this.count,
        },
      }).then(({ data }) => {
        // console.log(data);
        if (data.code == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("获取数据失败!");
        }
      });
    },
    pageBtn(page) {
      this.render();
    },
    checkFn: function () {
      this.render();
    },
    resetFn: function () {
      this.formData = {};
      this.render();
    },
    toAdd: function () {
      this.$router.push("/home/WxjhAdd");
    },
    toEdit: function (v) {
      this.$store.state.yqy.mainPlan = v;
      sessionStorage.setItem("mainPlan", JSON.stringify(v));
      this.$router.push("/home/WxjhEdit");
    },
    delBtn: function (id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/keepPlan/deleteKeepPlan",
            method: "delete",
            params: {
              id: id,
            },
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message.success("删除成功!");
              this.render();
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
  mounted: function () {
    this.render();
  },
};
</script>

<style scoped lang="less">
#mainplan {
  padding: 30px;
  h1 {
    padding-bottom: 20px;
  }
  .el-form {
    padding-bottom: 20px;
  }
  .footer {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>